<%@ page import="com.genghis.ptas.classroom.entity.ClassroomCourse" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <title>学堂信息</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <%@include file="../../common.jsp" %>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="corporate/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
    <link href="corporate/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
    <!-- END PAGE LEVEL PLUGIN STYLES -->

    <!-- BEGIN THEME STYLES -->
    <link href="corporate/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="corporate/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->

    <link rel="shortcut icon" href="favicon.ico"/>
    <%List<ClassroomCourse> classroomCourseList = (List<ClassroomCourse>) request.getAttribute("planInfo");%>
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>
<!-- BEGIN PAGE CONTAINER -->
<div class="page-container">

    <!-- BEGIN BREADCRUMBS -->
    <div class="row breadcrumbs margin-bottom-40">
        <div class="container">
            <div class="col-md-4 col-sm-4">
                <h1>学堂信息</h1>
            </div>
        </div>
    </div>
    <!-- END BREADCRUMBS -->

    <!-- BEGIN CONTAINER -->
    <div class="container  margin-bottom-40">
        <div class="row">
            <div class="col-md-8 col-sm-8">
                <!-- BEGIN CAROUSEL -->
                <div class="front-carousel">
                    <div id="myCarousel" class="carousel slide">
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item">
                                <img src="corporate/img/posts/img1.jpg" alt="">
                            </div>
                            <%for (ClassroomCourse classroomCourse : classroomCourseList) {%>
                            <div class="item">
                                <img style="height: 225px;width: 100%" src="<%=classroomCourse.getPhotoUrl()%>" alt="">
                            </div>
                            <%}%>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- END CAROUSEL -->

                <!-- BEGIN INFO BLOCK -->
                <h2>教学计划</h2>
                <!-- BEGIN LISTS -->
                <div class="row front-lists-v1">
                    <div class="col-md-6">
                        <ul class="list-unstyled margin-bottom-20">
                            <%for (ClassroomCourse classroomCourse : classroomCourseList) {%>
                            <%if (classroomCourse.getStudentState() == null) {%>
                            <li><i class="fa fa-square-o"></i> 第<%=classroomCourse.getCourseNumber()%>
                                课：<%=classroomCourse.getCourseName()%>
                            </li>
                            <%} else if (classroomCourse.getStudentState().equals("已完成")) {%>
                            <li><i class="fa fa-check-square-o"></i> 第<%=classroomCourse.getCourseNumber()%>课：<a
                                    href="javascript:void(0);"
                                    onclick="watchCourse(<%=classroomCourse.getCourseId()%>)"><%=classroomCourse.getCourseName()%>
                            </a></li>
                            <%} else {%>
                            <li><i class="fa fa-square-o"></i> 第<%=classroomCourse.getCourseNumber()%>课：<a
                                    href="javascript:void(0);"
                                    onclick="watchCourse(<%=classroomCourse.getId()%>,<%=classroomCourse.getCourseId()%>)"><%=classroomCourse.getCourseName()%>
                            </a></li>
                            <%
                                    }
                                }
                            %>
                        </ul>
                    </div>
                </div>
                <!-- END LISTS -->
                <!-- END INFO BLOCK -->

                <h2>学堂拓扑</h2>
                <!-- BEGIN FORM-->
                <div style="background-image: url('img/user/expend.jpeg'); height: 240px;width:100%;">
                    <div id="expand" style="display:none;">
                        <canvas id="myCanvas1" style="width:1000;height: 500;margin-left: 15%;float: left">
                            Your browser does not support the canvas element.
                        </canvas>
                        <canvas id="myCanvas2"
                                style="width:1000;height: 500;margin-left: 15% ;margin-top: -20px;float: left">
                            Your browser does not support the canvas element.
                        </canvas>
                        <canvas id="myCanvas3"
                                style="width:1000;height: 500;margin-right: 15% ;margin-top: -281px;float: right">
                            Your browser does not support the canvas element.
                        </canvas>
                        <canvas id="myCanvas4"
                                style="width:1000;height: 500;margin-right: 15% ;margin-top: -181px;float: right">
                            Your browser does not support the canvas element.
                        </canvas>
                    </div>
                </div>
                <!-- BEGIN FORM-->
            </div>

            <div class="col-md-4 col-sm-4 sidebar">
                <div style="height: 225px">
                    <h2 class="no-top-space">班级信息</h2>

                    <p style="font-size: 15px">
                        班级名称:<strong>${classroomInfo.name}</strong><br>
                        通过分数:<strong>${classroomInfo.passScore}</strong><br>
                        计划时间:<strong>${classroomInfo.planTime}天</strong><br>
                    </p>
                    </address>
                    <c:if test="${isLogin}">
                        <button type="submit" class="btn btn-default theme-btn"
                                onclick="joinClassroom(${classroomInfo.id})"><i
                                class="icon-ok"></i> 申请加入 <i class="m-icon-swapright m-icon-white"></i>
                        </button>
                    </c:if>
                    <div class="space10"></div>
                </div>
                <!-- END FORM-->

                <h2>结业试题</h2>

                <div id="accordion1" class="panel-group">
                    <form action="#" class="horizontal-form margin-bottom-40" role="form">
                        <div class="form-group">
                            <label class="control-label">试题名称:</label>

                            <div class="col-lg-12">
                                <input type="type" class="form-control" disabled="disabled"
                                       value="${classroomInfo.examinationInfo.examinationName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">创建时间:</label>

                            <div class="col-lg-12">
                                <input type="type" class="form-control" disabled="disabled"
                                       value="${classroomInfo.examinationInfo.establishData}">
                            </div>
                        </div>
                        <c:if test="${isLogin}">
                            <button type="button" class="btn btn-default theme-btn"
                                    onclick="doExamination(${classroomInfo.examinationId})"><i class="icon-ok"></i>开始做题<i class = "m-icon-swapright m-icon-white"></i>
                            </button>
                        </c:if>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONTAINER -->

</div>
<!-- END PAGE CONTAINER -->

<!-- BEGIN COPYRIGHT -->
<div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <p>
                    <span class="margin-right-10">2014 © 长春工业大学. 苏格拉没有底开发小队 版权所有 </span>
                </p>
            </div>
            <div class="col-md-4">
                <ul class="social-footer">
                    <li><img src="ecommerce/img/payments/western-union.jpg" alt="We accept Western Union"
                             title="We accept Western Union"></li>
                    <li><img src="ecommerce/img/payments/american-express.jpg" alt="We accept American Express"
                             title="We accept American Express"></li>
                    <li><img src="ecommerce/img/payments/MasterCard.jpg" alt="We accept MasterCard"
                             title="We accept MasterCard"></li>
                    <li><img src="ecommerce/img/payments/PayPal.jpg" alt="We accept PayPal" title="We accept PayPal">
                    </li>
                    <li><img src="ecommerce/img/payments/visa.jpg" alt="We accept Visa" title="We accept Visa"></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END COPYRIGHT -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="corporate/plugins/respond.min.js"></script>
<![endif]-->
<script src="corporate/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="corporate/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="corporate/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="corporate/plugins/hover-dropdown.js"></script>
<script type="text/javascript" src="corporate/plugins/back-to-top.js"></script>
<!-- END CORE PLUGINS -->
<script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
<base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()%><c:url value="/"/>"/>

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="corporate/scripts/app.js"></script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        App.init();
        $("#expand").fadeIn(3000);
        pain();
    });

    function pain() {
        var c = document.getElementById("myCanvas1");
        var myCanvas1 = c.getContext("2d");
        myCanvas1.strokeStyle = '#8470FF';
        myCanvas1.moveTo(200, 110);
        myCanvas1.lineTo(120, 100);
        myCanvas1.lineTo(45, 50);
        myCanvas1.font = "20px Verdana";
        // 创建渐变
        var gradient = myCanvas1.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1.0", "Coral ");
        // 用渐变填色
        myCanvas1.fillStyle = gradient;
        myCanvas1.fillText("${classroomInfo.name}", 200, 120);
        myCanvas1.fillText("${expend[0].name}", 0, 40);
        myCanvas1.stroke();

        var c = document.getElementById("myCanvas2");
        var myCanvas2 = c.getContext("2d");
        myCanvas2.strokeStyle = '#8470FF';
        myCanvas2.moveTo(170, 50);
        myCanvas2.lineTo(205, 0);
        myCanvas2.font = "20px Verdana";
        // 创建渐变
        var gradient = myCanvas2.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1.0", "Coral ");
        // 用渐变填色
        myCanvas2.fillStyle = gradient;
        myCanvas2.fillText("${expend[1].name}", 120, 70);
        myCanvas2.stroke();

        var c = document.getElementById("myCanvas3");
        var myCanvas3 = c.getContext("2d");
        myCanvas3.strokeStyle = '#8470FF';
        myCanvas3.moveTo(70, 110);
        myCanvas3.lineTo(130, 60);
        myCanvas3.lineTo(160, 50);
        myCanvas3.font = "20px Verdana";
        // 创建渐变
        var gradient = myCanvas3.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop("0.5", "magenta");
        gradient.addColorStop("1.0", "blue ");
        // 用渐变填色
        myCanvas3.fillStyle = gradient;
        myCanvas3.fillText("${expend[2].name}", 160, 50);
        myCanvas3.stroke();

        var c = document.getElementById("myCanvas4");
        var myCanvas3 = c.getContext("2d");
        myCanvas3.strokeStyle = '#8470FF';
        myCanvas3.moveTo(140, 70);
        myCanvas3.lineTo(80, 60);
        myCanvas3.lineTo(30, 25);
        myCanvas3.font = "20px Verdana";
        // 创建渐变
        var gradient = myCanvas3.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop("0.5", "magenta");
        gradient.addColorStop("1.0", "blue ");
        // 用渐变填色
        myCanvas3.fillStyle = gradient;
        myCanvas3.fillText("${expend[3].name}", 140, 80);
        myCanvas3.stroke();
    }

    function joinClassroom(classroomId) {
        $.ajax({
            url: "classroom/userJoinClassroom",
            async: false,
            data: {
                classroomId: classroomId
            },
            dataType: "json",
            type: "POST",
            success: function (judge) {
                parent.parent.initTopRegister();
                parent.parent.$("#allRegister").html(parent.parent.$("#allRegister").html() - -1);
                if (judge) {
                    parent.bootbox.alert("申请成功！");
                } else {
                    parent.bootbox.alert("您已申请！");
                }

            },
            error: function () {
                parent.bootbox.alert("注册失败！");
            }
        })
    }

    function watchCourse(classroomCourseId, courseId) {
        window.location.href = basePath + "course/classroomEnterCourseInfoDo?classroomInfoId=${classroomInfo.id}" + "&classroomCourseId=" + classroomCourseId + "&courseId=" + courseId;
    }

    function doExamination(examinationId) {
        window.location.href = basePath + "task/examination/doExaminationDo?id=" + examinationId;
    }


</script>